<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <el-col :span="24" class="breadcrumb-container input-val-box">
          <el-input v-model="searchForm.real_name" placeholder="填写发布人" size="small" class="w-140 mr-10"></el-input>
          <el-input v-model="searchForm.title" placeholder="填写问卷标题" size="small" class="w-140 mr-10"></el-input>
          <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
        </el-col>
      </div>
      <div class="mb-10">
        <!--0 待审核 1 通过 2 驳回-->
        <el-radio-group v-model="radio1" @change="changeListFn" size="small">
          <el-radio-button label="0">待审核（{{ wait_number }}）</el-radio-button>
          <el-radio-button label="2">已驳回（{{ reject_number }}）</el-radio-button>
        </el-radio-group>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="create_time"
                label="提交时间"
                :key="1">
            </el-table-column>
            <el-table-column
                prop="title"
                label="问卷标题"
                :key="2">
            </el-table-column>
            <el-table-column
                label="提交人"
                :key="3">
              <template slot-scope="scope">
                <span v-if="scope.row.user" class="onelist">{{ scope.row.user.realname }}</span>
                <span v-else class="c-danger">无数据</span>
              </template>
            </el-table-column>
            <el-table-column
                label="审核人"
                :key="4" v-if="radio1==2">
              <template slot-scope="scope">
                <span v-if="scope.row.examine">{{ scope.row.examine.realname }}</span>
                <span v-else class="c-danger">无数据</span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷范围"
                :key="5">
              <template slot-scope="scope">
                <span v-if="scope.row.type==0">全校</span>
                <span v-if="scope.row.type==1">特定年段(<span v-for="(item,index) in scope.row.section_id"
                                                          :key="index">{{ item.section_name }}</span>)</span>
                <span v-if="scope.row.type==2">
                  <span style="display: block;">特定班级</span>
                  (
                  <span v-for="(item,index) in scope.row.class_id" :key="index">{{ item.class_name }}</span>
                  <span v-if="scope.row.student_id">,特定学生</span>
                  )</span>
              </template>
            </el-table-column>
            <el-table-column
                label="通知人数" v-if="radio1==0"
                :key="6">
              <template slot-scope="scope">
                {{ scope.row.count }}
              </template>
            </el-table-column>
            <el-table-column
                label="驳回理由" v-if="radio1==2"
                :key="7">
              <template slot-scope="scope">
                <span class="c-danger">{{ scope.row.content }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="140"
                :key="8"
                v-if="radio1==0">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand" trigger="click">
                  <el-button type="primary" size="mini">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="1+'-'+scope.$index">查看修改</el-dropdown-item>
                    <el-dropdown-item :command="2+'-'+scope.$index" v-if="radio1==0">确定发布</el-dropdown-item>
                    <el-dropdown-item :command="3+'-'+scope.$index" v-if="radio1==0">驳回问卷</el-dropdown-item>
<!--                    <el-dropdown-item :command="4+'-'+scope.$index" v-if="userInfo.id==1">删除</el-dropdown-item>-->
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="160"
                :key="9"
                v-if="radio1==2">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="gotoDetail(scope.row.id)" plain>详情</el-button>
<!--                <el-button type="danger" size="small" @click="handleDetel(scope.$index)" v-if="userInfo.id==1" plain>-->
<!--                  删除-->
<!--                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar" v-if="page.total">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <detail :editId="detailId" :visible.sync="detailVisible" @getInit="InitFn" inType="1"></detail>
    <lookDetail :editId="detailId" :visible.sync="lookDetailVisible"></lookDetail>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import api from '@/utils/api.js'
import detail from "./components/detail";
import lookDetail from "./components/lookDetail";
import {mapActions, mapGetters} from "vuex";

export default {
  components: {
    detail,
    lookDetail
  },
  data() {
    return {
      radio1: 0,
      detailVisible: false,
      lookDetailVisible:false,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      qrcodeSrc: '',
      searchForm: {
        real_name: '',
        title: ''
      },
      reject_number: 0, // 驳回
      wait_number: 0, // 待审核
      detailId: 0
    }
  },
  created() {
    this.InitFn()
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 初始化
    InitFn() {
      // 0待审核1审核2驳回 is_examine
      this.searchForm.p = this.page.pageindex
      this.searchForm.is_examine = this.radio1
      this.$fetch(api.admin_questionnaire_index, this.searchForm).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
          this.reject_number = response.reject_number // 驳回
          this.wait_number = response.wait_number // 待审核
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    searchFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    getqrcode(index) {
      this.$confirm('确定通过此审核，将此通知下发指定班级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.checkSuccessFn(index)
      }).catch(() => {

      })
    },
    checkSuccessFn(index) {
      // 0待审核1审核2驳回 is_examine
      this.$post(api.admin_questionnaire_adopt, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    gotoDetail(id) {
      if (Number(this.radio1) === 2) {
        // this.$router.push('questionnaireDetail?editId=' + id)
        this.detailId = id
        this.lookDetailVisible = true
      } else {
        // this.$router.push('questionnaireCopyDetail?editId=' + id)
        // 进行编辑
        this.detailId = id
        this.detailVisible = true
      }
    },
    detelTearch(index) {
      this.$prompt('请填写相应的驳回理由，以便记录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        console.log('输入的内容：', value)
        if (!value) {
          this.$message.error('请填写相应的驳回理由')
        } else {
          this.checkFailFn(index, value)
        }
      }).catch(() => {
      })
    },
    checkFailFn(index, value) {
      // 0待审核1审核2驳回 is_examine
      this.$post(api.admin_questionnaire_reject, {
        id: this.arryList[index].id,
        content: value
      }).then((response) => {
        if (response.code === 0) {
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    changeListFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon(index) {
      this.$post(api.admin_questionnaire_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCommand(command) {
      let command_ = command.split('-')
      let n = this;
      if (Number(command_[0]) === 1) {
        this.gotoDetail(this.arryList[command_[1]].id)
      }
      // 视频采集
      if (Number(command_[0]) === 2) {
        this.getqrcode(command_[1])
      }
      // 视频记录
      if (Number(command_[0]) === 3) {
        this.detelTearch(command_[1])
      }
      if (Number(command_[0]) === 4) {
        this.handleDetel(command_[1])
      }
    }
  },
  mounted() {
  },
  // 缓存机制 star
  beforeRouteEnter(to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
  // 缓存机制 end
}
</script>
